html,
body,
#app {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  font-size: 14px;
  font-family: PingFang SC;
  color: #f7fbfb;
}

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 4px;
  box-shadow: inset 0 0 5px rgba(255, 255, 0, 0.1);
  background: #a28107; //rgba(0, 0, 0, 0.65);
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
}

@font-face {
  font-family: "PangMen";
  src: url("./fonts/pangmen.ttf");
}


.slide-left-enter-active {
  transition: all 0.3s;
}

.slide-left-leave-active {
  transition: all 0.3s;
}

.slide-left-enter-from,
.slide-left-leave-to {
  transform: translateX(-400px);
  opacity: 0;
}

.slide-right-enter-active {
  transition: all 0.3s;
}

.slide-right-leave-active {
  transition: all 0.3s;
}

.slide-right-enter-from,
.slide-right-leave-to {
  transform: translateX(400px);
  opacity: 0;
}

.slide-bottom-enter-active {
  transition: all 0.3s;
}

.slide-bottom-leave-active {
  transition: all 0.3s;
}

.slide-bottom-enter-from,
.slide-bottom-leave-to {
  transform: translateY(270px);
}
// .el-input{
//   --el-input-text-color:rgba(255, 255, 255, 0.8) !important;
//   --el-fill-color-blank
// }

.el-statistic {
  .el-statistic__content {
    color: #fff;
    .el-statistic__suffix {
      font-weight: 200 !important;
      font-size: 14px;
    }
  }
}

.mars3d-contextmenu-ul > li > a {
  padding-left: 12px;
}

// .custom-pop {
  .mars3d-popup-background {
    background-color: transparent;
    background-image: url(@/assets/images/redesign/popBg.png);
    background-size: 100% 101%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .mars3d-popup-content-wrapper {
    box-shadow: none;
  }

  .mars3d-popup-close-button {
    top: -2px;
    right: -8px;
    font-size: 24px
  }

  .mars3d-template-content {
    margin-top: 0px;
    max-height: 520px !important;
    overflow-y: hidden;
    div {
      display: flex;

      span {
        background: rgba(84, 84, 84, 0.6);
        box-sizing: border-box;
        display: block;
        padding: 0px 4px;
        flex: 1;
      }
    }
  }
// }

.yellow-btn {
  box-sizing: border-box;
  color: #fff;
  border: 1px solid #bf871b;
  background-color: #ff99002c;
  border-radius: 2px;
  line-height: 30px;
  padding: 0px 16px;
  height: 30px;
  // text-align: center;
  pointer-events: all;
  display: inline-flex;
  align-items: center;
  user-select: none;
  span {
    margin: 0px 4px;
  }

  img {
    height: 14px;
    width: 14px;
  }

  &:hover {
    cursor: pointer;
    background-color: #ff9900a4;
  }

  &:active {
    // scale: 0.95;
    background-color: #a9772b;
  }
}
.el-badge {
  .el-badge__content {
    line-height: 12px;
  }
}

.app-module {
  height: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 8px;
  .img-height {
    height: 100%;
  }
  .left-content,
  .right-content {
    display: flex;
    transition: translate 1s;
    width: 400px;
    position: relative;
  }

  .yxbdbz {
    width: max-content;
    // transition: all 1s;
  }

  .box-left,
  .box-right {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    gap: 8px;
  }

  .right-measure {
    position: relative;
    width: 60px;
    margin-right: 5px;
    border-radius: 0px 0px 0px 0px;
    // border: 1px solid orange;
  }

  .center {
    flex: 1;
    margin: 12px 12px 0px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .angle-div {
      position: absolute;
      bottom: 119px;
      right: 44px;
      background: linear-gradient(
        to bottom,
        rgba(116, 117, 119, 0.8) 0%,
        rgba(58, 68, 82, 0.8) 11%,
        rgba(46, 50, 56, 0.8) 46%,
        rgba(53, 53, 53, 0.8) 81%,
        rgba(53, 53, 53, 0.8) 100%
      );
      text-align: right;
      width: 715px;
      height: 30px;
      line-height: 30px;
      padding-right: 2px;
      .el-button--small {
        height: 26px;
        pointer-events: all;
      }
    }
    &-top {
      // flex: 1;
      // border: 1px solid #186d8f;
      // border-radius: 8px;
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;

      &-left {
        display: flex;
        gap: 16px;
        align-items: center;
      }

      &-right {
      }
    }

    &-bottom {
      margin-top: 24px;
      // border: 1px solid #186d8f;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      .color-legen {
        position: absolute;
        bottom: 24px;
        right: -12px;
        height: 156px;
      }
    }
  }
}

// gnss地图弹框样式
.device-popup-container {
  position: relative; 
  z-index: 120; 
  width:400px; 
  // background:rgba(0, 50, 50, 0.95); 
  // border-radius:4px; 
  // box-shadow:0 2px 12px 0 rgba(0,0,0,0.3); 
  overflow:hidden; 
  color:#fff; 
  // border:1px solid #003232;
  .device-popup-header {
    display:flex; 
    justify-content:space-between; 
    align-items:center;
    padding:10px; 
    // border-bottom:1px solid #1e4b8f; 
    // background:#0a1428;
    font-weight:bold;
    font-size:16px;
    color:#00a57f;
  }
  .device-info-module {
    padding:10px;
    // background:rgba(14, 36, 57, 0.7);
    >div {
      margin-top: 5px;
      margin-bottom:10px;
      .device-pos {
        font-size: 14px;
        margin-bottom:15px;
      }
      .device-content {
        display:flex; 
        justify-content:space-between; 
        // background:#0a1428; 
        padding:15px 5px; 
        border-radius:4px; 
        margin-top:5px;
        >div {
          text-align: center;
          flex:1;
          >div:nth-child(1) {
            color:#999; 
            font-size:14px;
          }
          >div:nth-child(2) {
            font-size:18px; 
            margin-top:5px;
          }
        }
      }
    }
  }
  .chart-module {
    padding:5px; 
    // background:rgba(10, 25, 45, 0.8);
    .chart-div {
      width:380px; 
      height:280px;
    }
  }
}
